<template>
  <div class="headerContent">
    <el-icon @click="handleChangeMenu"><Fold /></el-icon>
    <div class="headerTitleContent">欢迎进入RBAC-Admin 安全高效的后台管理系统</div>
    <div class="headerLeContent">
      <el-icon><Search /></el-icon>
      <el-icon><BellFilled /></el-icon>
      <el-icon @click="toggle"><FullScreen /></el-icon>
      <div class="userContent" />
      <el-icon @click="handleToSetting"><Tools /></el-icon>
    </div>
    <!-- <el-dropdown @command="handleCommand" trigger="click" class="a">
      <span class="el-dropdown-link">
        <el-icon class="el-icon--right"><arrow-down /></el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="a">修改密码</el-dropdown-item>
          <el-dropdown-item command="b">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown> -->

    <el-dialog title="修改密码" v-model="dialogTableVisible" width="500px">
      <el-form
        ref="userFormRef"
        :model="userForm"
        label-position="right"
        :rules="rules"
        label-width="100px"
        style="width: 400px"
      >
        <el-form-item label="原始密码" prop="oldpass">
          <el-input v-model="userForm.oldpass" type="password" />
        </el-form-item>
        <el-form-item label="新密码" prop="newpass">
          <el-input v-model="userForm.pass" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="userForm.checkPass" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updatePwd(userFormRef)">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { Search, FullScreen, BellFilled, Tools, Fold } from '@element-plus/icons-vue'
import { useFullscreen } from '@vueuse/core'
import { useRouter } from 'vue-router'

const router = useRouter()
import { ref, reactive } from 'vue'
// import { useUserStore } from '@/store/modules/user'
// import { useRouter } from 'vue-router'
import { FormInstance, FormRules } from 'element-plus'
import useAppstore from '@/store/modules/app.ts'

const { handleChangeMenu } = useAppstore()
// const router = useRouter()
// let useStore = useUserStore()
// const handleCommand = (command: string | number | object) => {
//   switch (command) {
//     case 'a':
//       // handlePwd()
//       break
//     case 'b':
//       handleLogout()
//       break
//     default:
//       break
//   }
// }
// const handleLogout = () => {
//   router.push('/')
// }
const { toggle } = useFullscreen()
const dialogTableVisible = ref(false)

const userFormRef = ref<FormInstance>()

const userForm = reactive({
  oldpass: '',
  pass: '',
  checkPass: '',
})

// const validateOldPass = (value: any, callback: any) => {
// reqCheckPwd({ userId: useStore.user?._id as string, password: value }).then((response) => {
//   if (response.status == 0) {
//     callback()
//   } else {
//     callback(new Error(response.msg))
//   }
// })
// }

const validatePass = (value: any, callback: any) => {
  if (value !== userForm.pass) {
    callback(new Error('两次输入密码不一致'))
  } else {
    callback()
  }
}

// 配置校验规则
const rules = reactive<FormRules>({
  // 旧密码
  // oldpass: [
  //   {
  //     required: true,
  //     validator: validateOldPass,
  //     trigger: ['blur', 'change'],
  //   },
  // ],
  // 新密码
  newpass: [
    {
      required: true,
      message: '请输入新密码',
      trigger: 'blur',
    },
  ],
  // 重复新密码
  checkPass: [
    {
      required: true,
      validator: validatePass,
      trigger: 'change',
    },
  ],
})

// const handlePwd = () => {
//   dialogTableVisible.value = true
//   nextTick(() => {
//     userFormRef.value.resetFields()
//     console.log('userFormRef.value', userFormRef.value)
//   })
// }

const updatePwd = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid: any) => {
    if (valid) {
      // reqUpdatePwd({
      //   userId: useStore.user?._id as string,
      //   password: userForm.pass,
      // }).then((response) => {
      //   if (response.status == 0) {
      //     handleLogout()
      //     dialogTableVisible.value = false
      //   }
      // })
    }
  })
}

const handleToSetting = () => {
  router.push({ name: 'SystemSetting' })
}
</script>

<style scoped lang="less">
@default-hover-color: rgb(24, 34, 44);

.headerContent {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  > * {
    height: 100%;
  }

  .el-icon,
  .userContent {
    text-align: center;
    height: 100%;
    width: 2rem;

    &:hover {
      cursor: pointer;
      background-color: @default-hover-color;
    }
  }
  .headerTitleContent {
    // display: flex;
    // flex-direction: column;
    height: 100%;
    // justify-content: center;

    line-height: 50px;
  }

  .headerLeContent {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    .userContent {
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      transform: translateY(25%);
      background-image: url('@/assets/images/avoter.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      cursor: pointer;
    }
  }
}
</style>
